<script setup lang="ts">
import geoJson from '@/map/china.json'
import * as echarts from 'echarts'
import {ECharts, EChartsOption} from "echarts";
import {ref, onMounted, reactive} from "vue";
import {getProvinceAqiStatisticsApi} from "@/api/chartApis.ts";
import options from "@/ts/particleOptions.ts"

const particleOptions = options
let chinaMapChart = ref()
let chinaMap = JSON.parse(JSON.stringify(geoJson))
echarts.registerMap('china', chinaMap);

let mapStatistics= reactive([{name: '辽宁', value: 3}])

/**
 * 初始化地图数据。
 * @param {any} chinaMap - ECharts地图实例。
 * @async
 */
const initData = async (chinaMap: any)=>{
  let res = await getProvinceAqiStatisticsApi()
  if (res?.data.code == 200){
    mapStatistics.splice(0, mapStatistics.length)
    let result = res.data.data
    for (let i = 0; i < result.length; i++){
      //去掉省字
      result[i].province = result[i].province.replace('省', '')
      mapStatistics.push({name: result[i].province, value: result[i].aqi})
    }
  }

  chinaMap.resize(); // 窗口或框架被调整大小时执行chinaMap.resize
  let options: EChartsOption = {
    title: {
      text: '全国空气质量概况',
      subtext: '中华人民共和国',
      left: 'center',
      textStyle: {
        color: '#ffffff'
      }
    },
    // 进行相关配置
    tooltip: {
      formatter: '{a} <br/> {c} 等级'
    }, // 鼠标移到图里面的浮动提示框
    dataRange: {
      min: 0,
      max: 6,
      text: ["High", "Low"],
      textStyle: {
        color: '#ffffff'
      },
      realtime: true,
      calculable: true,
      inRange: {
        color: ['#00ff00', '#ffff00', '#ff7f00', '#ff0000', '#8b00ff', '#8b0000']
      },
      pieces: [
        {min: 1, max: 1, label: '优', color: '#00ff00'},
        {min: 2, max: 2, label: '良', color: '#ffff00'},
        {min: 3, max: 3, label: '轻度', color: '#ff7f00'},
        {min: 4, max: 4, label: '中度', color: '#ff0000'},
        {min: 5, max: 5, label: '重度', color: '#8b00ff'},
        {min: 6, max: 6, label: '严重', color: '#8b0000'}
      ]
    },
    geo: {
      // 这个是重点配置区
      map: "china", // 表示中国地图
      roam: true,
      label: {
        show: true, // 是否显示对应地名
        color: '#5555f1',
        fontSize: 10
      },
      itemStyle: {
        borderColor: "#293171",
        borderWidth: 2,
        areaColor: "#efeded",
      },
      emphasis:{
        itemStyle:{
          areaColor: '#6c9de7'
        }
      }
    },
    series: [
      {
        type: "scatter",
        coordinateSystem: "geo", // 对应上方配置
      },
      {
        map: 'china',
        name: "空气质量", // 浮动框的标题
        type: "map",
        geoIndex: 0,
        data: mapStatistics
      },
    ],
  }
  chinaMap.setOption(options)
}

onMounted(()=>{
  let chinaMap = echarts.init(chinaMapChart.value);
  initData(chinaMap)
})

</script>

<template>
  <div class="w-1/3 h-2/3 absolute" >
    <vue-particles id="particles"   :options="particleOptions">
    </vue-particles>
  </div>
  <div class="w-full h-2/3" ref="chinaMapChart">

  </div>
</template>

<style scoped>

</style>

